<template>
  <c-layout>
    <template #header>
      <c-card title="查询条件">
        <c-forms :model="formData" :rules="rules" ref="form" showBtn :ok="submit">
          <c-formitems :form-data="formData" v-for="item in formItems" :key="item.value" :config="item"></c-formitems>
        </c-forms>
      </c-card>
    </template>
    <template #main>
      <c-card title="定点医疗机构信用数据列表">
        <template #right>
          <el-button @click="createRow" type="success">新增</el-button>
          <el-button type="primary">批量操作</el-button>
        </template>
        <c-table :data="tableData" @changePage="click" @selection-change="tabSelectionChange" selection>
          <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
          <el-table-column prop="date" label="日期" width="150" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button @click.prevent="detaileRow(scope.row)" type="text">详情</el-button>
              <el-button @click.prevent="deleteRow(scope.$index, tableData)" type="text">移除</el-button>
            </template>
          </el-table-column>
        </c-table>
      </c-card>
    </template>
  </c-layout>
  <c-dialog title="定点医疗机构数据采集详情" v-model="dialogVisible" width="90%">
    <c-forms :model="dialogFormData" :rules="dialogRules" ref="dialogForm">
      <c-formitems :form-data="dialogFormData" v-for="item in dialogFormItems" :key="item.value" :config="item"></c-formitems>
    </c-forms>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogCancel">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </template>
  </c-dialog>
</template>
<script>
// import { reactive, ref } from 'vue'
import { search } from './part/staticData.js'
import { tableData, tabSelectionChange, click, deleteRow, createRow, detaileRow } from './part/table.js'
import { form, submit, formData, formItems, rules } from './part/search.js'
import { dialogVisible, dialogForm, dialogFormData, dialogFormItems, dialogRules, dialogOk, dialogCancel } from './part/dialog.js'

export default {
  setup() {
    return {
      dialogVisible,
      dialogForm,
      dialogFormData,
      dialogFormItems,
      dialogRules,
      dialogOk,
      dialogCancel,

      form,
      submit,
      formData,
      formItems,
      rules,

      search,

      click,
      tableData,
      tabSelectionChange,
      deleteRow,
      createRow,
      detaileRow,
    }
  },
}
</script>
<style lang="scss"></style>
